<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <p ref="p" class="p1">count:{{count}}</p>
        <p>
            <button @click="addCount">count++</button>
        </p>
    </div>

</body>
<script>
    var vm = new Vue({
        // el:"#app",
        data: {
            count: 1,
        },
        methods: {
            addCount() {
                this.count++
            }
        },
        watch: {
            count: {
                handler:async function (newVal, oldVal) {
                    console.log("count发生了改变", newVal, oldVal);
                    
                    // 问题: 数据发生改变,视图不会立即更新,Dom中的内容还是原本的内容(视图更新是异步(微任务)的: 数据改变 => 需要先重新生成虚拟DOM => diff算法对比虚拟dom => 触发视图更新  => 微任务) 
                    // console.log(this.$refs.p.innerHTML);

                    // 如何在数据更新后,获取dom更新后的内容?
                    // 1. 视图更新是异步 => (微任务)  可以设置一个延时器(0s 宏任务)
                    // setTimeout(()=>{  
                    //     console.log("宏任务");
                    //     console.log(this.$refs.p.innerHTML);
                    // })
                    
                    // 2. Vue实例中可以使用$nextTick()方法
                    // a. $nextTick()方法接收一个回调函数,回调函数会在视图更新之后执行(微任务)
                    // b. $nextTick()不接受任何参数,默认会返回一个Promise实例(pending),等视图更新之后会变为fulfilled状态
                    // this.$nextTick(()=>{
                    //     console.log("微任务");
                    //     console.log(this.$refs.p.innerHTML);
                    // })

                    // this.$nextTick().then(()=>{
                    //     console.log("微任务");
                    //     console.log(this.$refs.p.innerHTML);
                    // })

                    await this.$nextTick();
                    console.log(this.$refs.p.innerHTML);
                    
                }
            }
        }
    })

    vm.$mount("#app");

    console.log(vm);
    console.log(vm.$refs);
    console.log("p",vm.$refs.p);

</script>

</html>